<template>
  <div class="more_integral_detail">
    <head-nav></head-nav>
    <div class="integralBox">
      <div class="zanwei-top"></div>
      <div class="detailBox">
        <div class="vipName">
          <p>会员卡号:
            <span>{{userInfo.XF_VIPCODE}}</span>
          </p>
          <p>{{currentItem.XF_TXDATETIME}}</p>
        </div>
        <div class="zjxf">
          <p>{{currentItem.mxxq}}</p>
          <p>{{currentItem.xfjl}}</p>
        </div>
        <div  class="availJf" :style="backgroundColor">
          <p>当前可用积分:{{sumjf}}</p>
        </div>
      </div>
      <div class="jfmx">
        <div class="jfmx_top">
          <span>积分明细</span>
        </div>
        <div class="jflist">
          <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
            <li v-for=" jfItem in artList" @click="selectItem(jfItem)">
              <div class="jfmxitem">
                <p>{{jfItem.XF_TXDATETIME}}</p>
                <p>{{jfItem.XF_BONUS>0?"+"+jfItem.XF_BONUS:jfItem.XF_BONUS}} 积分</p>
              </div>
            </li>
            <div class="list-loading" v-if="loading">
              <i class="iconfont icon-loading"></i> 加载中...
            </div>
            <div class="list-loading" v-if="artList.length >= 10">
              <div class="forbid"  v-if="!loading">
                到底了...
              </div>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api.js";
import { MessageBox, Toast } from "mint-ui";

export default {
  name: "MoreIntegralDetail",
  data() {
    return {
      userInfo: {
        JFSUM: ""
      },
      jfList: [],
      artList:[],
      currentItem: {},
      pnum: 1,
      prow: 10,
      forbid: false,
      loading: true,
      mshow: false,
      sumjf:0
    };
  },
  methods: {
    loadMore() {
      let num = this.pnum + 1;
      if (this.forbid) {
        return false;
      }
      this.pnum = num;
      this.loading = true;
      this.getjfmxlist();
    },
    selectItem(jfItem) {
      this.currentItem = jfItem;
    },
    getjfmxlist() {
      let that = this;
      let vipcode = JSON.parse(sessionStorage.getItem("userinfo")).vipcode;
      let row = this.prow;
      let num = this.pnum;
      api.getUserJfList(this, vipcode, row, num, res => {
        let data = res.data;
        if (data.code === 0) {
          let datas = JSON.parse(data.data);
          let list = datas.rows;
          console.log(list);
          if (list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              let timestamp = list[i].XF_TXDATETIME.time;
              let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
              let Y = date.getFullYear() + "/";
              let M =
                (date.getMonth() + 1 < 10
                  ? "0" + (date.getMonth() + 1)
                  : date.getMonth() + 1) + "/";
              let D = date.getDate() + "";
              D.length === 1 ? (D = "0" + D + "  ") : (D = D + " ");
              let h = date.getHours() + ":";
              h.length === 2 ? (h = "0" + h) : h;
              let m = date.getMinutes().toFixed() + ":";
              m.length === 2 ? (m = "0" + m) : m;
              let s = date.getSeconds().toFixed();
              s.length === 1 ? (s = "0" + s) : s;
              list[i].time = Y + M + D + h + m + s;
              if (list[i].XF_REMARK === "W2") {
                list[i].xfjl =
                  list[i].XF_BONUS > 0
                    ? "增加积分" + list[i].XF_BONUS + "积分"
                    : "减少积分" + Math.abs(list[i].XF_BONUS) + "积分";
              } else if (list[i].XF_REMARK === "W1") {
                list[i].xfjl = "绑定会员,赠送" + list[i].XF_BONUS + "积分";
              } else {
                list[i].xfjl = list[i].XF_REMARK;
              }
            }
            that.artList = that.artList.concat(list);
            
            
            that.currentItem = that.artList[0];
          } else {
            that.forbid = true;
            that.loading = false;
          }
          // list.sort(function (n,m) {
          // 	return m.XF_TXDATETIME.time - n.XF_TXDATETIME.time;
          // });
          
        }
        setTimeout(function() {
          that.loading = false;
        }, 1000);
      });
    }
  },
  mounted() {
    let that = this;
    api.getUserInfo(this, res => {
      // console.log(res);
      let data = res.data;
      if (data.code === 0) {
        that.userInfo = res.data.data;
        console.log(res.data.data);
      } else if(data.code === 9999){
        //orcal数据库异常 关闭当前窗口
        MessageBox.alert(data.msg, '温馨提示').then(action => {
          wx.closeWindow()
        })
      }else {
        MessageBox("提示", data.msg);
      }
    });
     //获取会员积分总数
      api.getUserInfo_jf(this,res=>{
        if(res.data.code==0){
          that.sumjf = res.data.data;
        }
        console.log(res,"==积分总数");

      })
    that.getjfmxlist();
  }
};
</script>

<style scoped lang="less">
.integralBox {
  display: flex;
  flex-direction: column;
  padding: 0 0.3rem;
  background: #fff;
  height: 100vh;
  overflow: hidden;
  .detailBox {
    margin-top: 0.3rem;
    background: #dcdcdc;
    .vipName {
      font-size: 0.3rem;
      padding: 0.3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px #eee solid;
    }
    .zjxf {
      padding: 0 0 0.3rem 0;
      text-align: center;
      p {
        font-size: 0.43rem;
        /*font-size: 18pt;*/
      }
      p:nth-child(2) {
        padding: 0 0.4rem;
        color: red;
        font-weight: bold;
      }
    }
    .availJf {
      background: #F05DC4;
      padding: 0.2rem;
      font-size: 0.32rem;

      color: #ffffff;
    }
  }
  .jfmx {
    flex: 1;
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    .jflist {
      flex: 1;
      overflow: scroll;
      ul {
        margin-top: 0.1rem;
        height: 6.7rem;
        overflow-y: scroll;
        li {
          .jfmxitem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.05rem;
            margin-top: 0;
            font-size: 0.3rem;
          }
        }
      }
    }
    .jfmx_top {
      display: flex;
      justify-content: space-between;
      padding: 0.1rem;
      line-height: 0.5rem;
      border-bottom: 1px solid #888;
      font-size: 0.32rem;
      span:nth-child(1) {
        font-weight: bold;
      }
    }
  }
}
</style>
